<template>
	<view class="page-container" style="height: 100vh;">
		<layout index="/pages/wms/index" :a_icon="true" layoutTitle="仓库管理">
			<!-- 调试信息 -->
			<view class="debug-info" style="padding: 10px; background-color: #f0f0f0; margin: 10px; border-radius: 5px; font-size: 12px;">
				<view>菜单项数量: {{al.length}}</view>
				<view>当前用户: {{userProfile.xingming}}</view>
                <view v-if="lastClicked">最后点击: {{lastClicked.name}} (路径: {{lastClicked.path}})</view>
			</view>
			
			<!-- 欢迎区域 -->
			<view class="welcome-section">
				<view class="welcome-text">
					<view class="greeting">{{ userProfile.xingming || '您好' }}，欢迎回来</view>
					<view class="subtitle">绿色低碳 · 智能仓储管理系统</view>
				</view>
				<view class="eco-badge">
					<view class="icon-text">碳</view>
				</view>
			</view>
			
			<!-- 功能卡片区域 -->
			<view class="feature-grid">
				<view 
					v-for="(item, index) in al" 
					:key="index" 
					class="feature-card"
					:class="{'has-new': index % 3 === 0}"
					hover-class="feature-card-hover" 
					@click="handleCardClick(item, index)">
					<view class="card-content">
						<view class="feature-icon" :style="{backgroundColor: getIconColor(index)}">
							<view class="icon-text">{{ getIconText(item.name) }}</view>
						</view>
						
						<view class="feature-info">
							<view class="feature-name">{{ item.name }}</view>
						</view>
						
						<view class="feature-arrow">
							<view class="arrow-icon">→</view>
						</view>
					</view>
					
					<view class="progress-bar" :style="{ width: getProgressWidth(index) + '%', backgroundColor: getProgressColor(index) }"></view>
				</view>
			</view>

			<!-- 统计区域 -->
			<view class="stats-section">
				<view class="stats-title">
					<view class="title-text">仓库状态</view>
				</view>
				<view class="stats-cards">
					<view class="stat-card">
						<view class="stat-icon" style="background-color: rgba(46, 204, 113, 0.1);">
							<view class="stat-icon-text">↓</view>
						</view>
						<view class="stat-info">
							<view class="stat-label">入库申请</view>
							<view class="stat-value">12</view>
						</view>
					</view>
					<view class="stat-card">
						<view class="stat-icon" style="background-color: rgba(52, 152, 219, 0.1);">
							<view class="stat-icon-text">↑</view>
						</view>
						<view class="stat-info">
							<view class="stat-label">出库申请</view>
							<view class="stat-value">8</view>
						</view>
					</view>
					<view class="stat-card">
						<view class="stat-icon" style="background-color: rgba(155, 89, 182, 0.1);">
							<view class="stat-icon-text">≡</view>
						</view>
						<view class="stat-info">
							<view class="stat-label">库存水平</view>
							<view class="stat-value">86%</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 碳足迹提示 -->
			<view class="carbon-footer">
				<view class="carbon-icon">🌱</view>
				<view class="carbon-text">碳管理系统 - 为绿色仓储助力</view>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import layout from '../../components/layout/layout.vue';
	import { getSmallMenu } from "@/api/menu/index";
	import { getUserProfile } from "../../api/system/user";

	// 跟踪最后点击的菜单项
	const lastClicked = ref(null);

	// 菜单数据 - 添加默认测试数据确保页面能正常渲染
	const al = ref([
		{
			name: '入库管理',
			path: 'RKGL',
			icon: ''
		},
		{
			name: '出库管理',
			path: 'CKGL',
			icon: ''
		},
		{
			name: '库存查询',
			path: 'KCCX',
			icon: ''
		},
		{
			name: '物料分类',
			path: 'PDXX',
			icon: ''
		}
	]);
	
	// 用户信息 - 添加默认值确保显示
	const userProfile = ref({
		xingming: '管理员'
	});
	
	// 碳中和主题色彩
	const colors = {
		primary: '#2ecc71',
		secondary: '#27ae60',
		accent: '#3498db',
		dark: '#2c3e50',
		light: '#ecf0f1',
		gradient: ['#27ae60', '#2ecc71', '#3498db']
	};
	
	// 获取菜单数据
	const getCaoXiaoData = async function() {
		try {
			let g = 0; // 默认值
			const userRes = await getUserProfile();
			
			if (userRes && userRes.roleGroup === '超级管理员') {
				g = 1;
			} else if (userRes && userRes.roleGroup === '业务员') {
				g = 2;
			}
			
			const res = await getSmallMenu(2, g);
			if (res && res.length > 0) {
				al.value = res.map(item => {
					// 处理路径，确保格式正确
					let path = '';
					if (item.url) {
						// 移除路径开头的斜杠，稍后会在tiaozhuan函数中重新添加
						path = item.url.startsWith('/') ? item.url.substring(1) : item.url;
					}
					
					return {
						name: item.name || '未命名',
						path: path, 
						icon: item.icon || '',
						originalUrl: item.url || '' // 保留原始URL以便调试
					};
				});
				
				// 调试输出
				console.log('加载菜单数据:', al.value);
			}
		} catch (error) {
			console.error('获取菜单数据失败:', error);
			// 保留默认测试数据，不清空
		}
	};
	
	// 获取用户信息
	const getUserInfo = async function() {
		try {
			const res = await getUserProfile();
			if (res && res.code === 200 && res.data) {
				userProfile.value = res.data;
			}
		} catch (error) {
			console.error('获取用户信息失败:', error);
		}
	};
	
	// 页面跳转
	const tiaozhuan = function(path) {
		if (!path) {
			console.log('路径为空，无法跳转');
			return;
		}
		
		try {
			// 检查路径是否已经包含完整路径
			let fullPath = path;
			
			// 如果是相对路径，构建完整路径
			if (!path.startsWith('/')) {
				// 判断路径是否已包含目录前缀
				if (path.includes('pages/') || path.includes('pages\\')) {
					fullPath = `/${path}`;
				} else if (path.includes('WLFL/') || path.includes('WLFL\\')) {
					fullPath = `/pages/wms/${path}`;
				} else {
					fullPath = `/pages/wms/WLFL/${path}`;
				}
			}
			
			console.log('跳转到路径:', fullPath);
			
			uni.navigateTo({
				url: fullPath,
				fail: (err) => {
					console.error('页面跳转失败:', err);
					
					// 尝试降级使用switchTab
					uni.switchTab({
						url: fullPath,
						fail: (err2) => {
							console.error('switchTab跳转失败:', err2);
							uni.showToast({
								title: '页面不存在',
								icon: 'none'
							});
						}
					});
				}
			});
		} catch (error) {
			console.error('跳转异常:', error);
		}
	};
	
	// 获取图标文本
	const getIconText = (name) => {
		if (!name) return '?';
		return name.substring(0, 1);
	};
	
	// 获取图标背景色
	const getIconColor = (index) => {
		const colorList = [
			'#2ecc71', '#27ae60', '#3498db', '#2980b9', 
			'#1abc9c', '#16a085', '#f1c40f', '#f39c12'
		];
		return colorList[index % colorList.length];
	};
	
	// 获取进度条宽度
	const getProgressWidth = (index) => {
		const baseWidth = 30 + (index % 7) * 10;
		return baseWidth;
	};
	
	// 获取进度条颜色
	const getProgressColor = (index) => {
		const colorList = [
			'#2ecc71', '#3498db', '#9b59b6', '#1abc9c', 
			'#f1c40f', '#e67e22', '#e74c3c'
		];
		return colorList[index % colorList.length];
	};
	
	// 处理卡片点击
	const handleCardClick = (item, index) => {
		console.log('点击了卡片:', item);
		lastClicked.value = item;
		
		// 防抖处理 - 避免短时间多次点击
		if (item._lastClickTime && Date.now() - item._lastClickTime < 500) {
			console.log('点击过快，忽略');
			return;
		}
		
		// 记录点击时间
		item._lastClickTime = Date.now();
		
		// 执行跳转
		if (item.path) {
			tiaozhuan(item.path);
		} else {
			uni.showToast({
				title: '路径为空',
				icon: 'none'
			});
		}
	};
	
	onMounted(() => {
		// 先使用默认数据渲染，然后尝试获取实际数据
		setTimeout(() => {
			getCaoXiaoData();
			getUserInfo();
		}, 500);
	});
</script>

<style>
.page-container {
	background-color: #f6fbf8;
	min-height: 100vh;
}

/* 欢迎区域样式 */
.welcome-section {
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #27ae60;
	color: #ffffff;
	border-radius: 20rpx;
	margin: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.2);
}

.welcome-text .greeting {
	font-size: 42rpx;
	font-weight: bold;
	color: #ffffff;
	display: block;
	margin-bottom: 10rpx;
}

.welcome-text .subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	display: block;
}

.eco-badge {
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 功能卡片样式 */
.feature-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	justify-content: space-between;
}

.feature-card {
	width: 48%;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	position: relative;
	border: 1px solid rgba(230, 230, 230, 0.5);
	transition: all 0.3s ease;
}

.feature-card-hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
}

.card-content {
	padding: 24rpx;
	display: flex;
	align-items: center;
}

.feature-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 16rpx;
}

.icon-text {
	color: white;
	font-size: 28rpx;
	font-weight: bold;
}

.feature-info {
	flex: 1;
}

.feature-name {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.feature-arrow {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arrow-icon {
	font-size: 28rpx;
	color: #999;
}

.progress-bar {
	height: 4rpx;
	position: absolute;
	bottom: 0;
	left: 0;
}

.has-new::after {
	content: '';
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #e74c3c;
	box-shadow: 0 0 5rpx rgba(231, 76, 60, 0.5);
}

/* 统计区域 */
.stats-section {
	margin: 20rpx 30rpx 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(230, 230, 230, 0.5);
}

.stats-title {
	padding: 10rpx 0 20rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 28rpx;
	color: #444;
	font-weight: 500;
	position: relative;
	padding-left: 20rpx;
}

.title-text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6rpx;
	height: 24rpx;
	border-radius: 3rpx;
	background-color: #2ecc71;
}

.stats-cards {
	display: flex;
	justify-content: space-between;
}

.stat-card {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 16rpx;
}

.stat-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 16rpx;
}

.stat-icon-text {
	color: #2ecc71;
	font-size: 28rpx;
	font-weight: bold;
}

.stat-info {
	display: flex;
	flex-direction: column;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 4rpx;
}

.stat-value {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

/* 碳足迹提示 */
.carbon-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0 40rpx;
}

.carbon-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

.carbon-text {
	font-size: 24rpx;
	color: #666;
}
</style>